import { Component, Host, h, Prop, forceUpdate } from '@stencil/core';
import { IbzExpCalendarController } from '../../controllers';

/**
 * 导航日历
 *
 * @author chitanda
 * @date 2021-06-22 13:06:46
 * @export
 * @class IBzExpCalendar
 */
@Component({
  tag: 'ibz-exp-calendar-header',
  styleUrl: 'ibz-exp-calendar-header.scss',
})
export class IBzExpCalendarHeader {
  /**
   * 控制器
   *
   * @type {IbzExpCalendarController}
   * @memberof IBzExpCalendarHeader
   */
  @Prop()
  ctrl: IbzExpCalendarController;

  componentWillLoad() {
    this.changeDate = this.changeDate.bind(this);
    this.ctrl.evt.on('changeDate', this.changeDate);
    this.selectChange = this.selectChange.bind(this);
    this.ctrl.evt.on('selectChange', this.selectChange);
  }

  changeDate() {
    forceUpdate(this);
  }
  /**
   * 选中发生改变
   *
   * @memberof IBzExpCalendarHeader
   */
  selectChange() {
    forceUpdate(this);
  }

  /**
   * 绘制函数
   *
   * @return {*}
   * @memberof IBzExpCalendarHeader
   */
  render() {
    return (
      <Host class='ibz-exp-calendar-header'>
        <div class='header-left'>
          <button onClick={() => this.dArrowLeftClick()}>{this.dArrowLeft()}</button>
          <button onClick={() => this.arrowLeftClick()}>{this.arrowLeft()}</button>
        </div>
        <span>
          {this.ctrl.title.substr(0, 5)}&nbsp;{this.ctrl.title.substr(5)}
        </span>
        <div class='header-right'>
          <button onClick={() => this.arrowRightClick()}>{this.arrowRight()}</button>
          <button onClick={() => this.dArrowRightClick()}>{this.dArrowRight()}</button>
        </div>
      </Host>
    );
  }

  /**
   * 左箭头单击
   *
   * @memberof IBzExpCalendarHeader
   */
  arrowLeftClick() {
    this.ctrl.previousMonth();
  }

  /**
   * 左双箭头单击
   *
   * @memberof IBzExpCalendarHeader
   */
  dArrowLeftClick() {
    this.ctrl.previousYear();
  }

  /**
   * 右箭头单击
   *
   * @memberof IBzExpCalendarHeader
   */
  arrowRightClick() {
    this.ctrl.nextMonth();
  }

  /**
   * 右双箭头单击
   *
   * @memberof IBzExpCalendarHeader
   */
  dArrowRightClick() {
    this.ctrl.nextYear();
  }

  /**
   * 左双箭头
   *
   * @return {*}
   * @memberof IBzExpCalendarHeader
   */
  dArrowLeft() {
    return (
      <svg
        class='icon'
        viewBox='0 0 1024 1024'
        version='1.1'
        xmlns='http://www.w3.org/2000/svg'
        p-id='1130'
        width='16'
        height='16'
      >
        <path
          d='M534.186667 896c-13.610667 0-25.472-5.12-35.669334-15.274667l-312.576-310.869333c-20.352-20.394667-20.352-52.650667 0-71.338667l310.869334-312.576c20.394667-20.352 52.650667-20.352 71.338666 0 20.394667 20.394667 20.394667 52.693333 0 71.338667l-275.2 276.906667 275.2 275.2c20.394667 20.352 20.394667 52.650667 0 71.338666-8.490667 10.197333-22.058667 15.274667-33.962666 15.274667z'
          p-id='1131'
        ></path>
        <path
          d='M845.056 896c-13.610667 0-25.514667-5.12-35.712-15.274667l-312.533333-310.869333c-20.394667-20.394667-20.394667-52.650667 0-71.338667l312.533333-312.576c20.394667-20.352 52.693333-20.352 71.381333 0 20.352 20.394667 20.352 52.693333 0 71.338667l-275.2 276.906667 275.2 275.2c20.352 20.352 20.352 52.650667 0 71.338666a51.797333 51.797333 0 0 1-35.669333 15.274667z'
          p-id='1132'
        ></path>
      </svg>
    );
  }

  /**
   * 左箭头
   *
   * @return {*}
   * @memberof IBzExpCalendarHeader
   */
  arrowLeft() {
    return (
      <svg
        class='icon'
        viewBox='0 0 1024 1024'
        version='1.1'
        xmlns='http://www.w3.org/2000/svg'
        p-id='1350'
        width='16'
        height='16'
      >
        <path
          d='M672.853333 896c-13.952 0-26.197333-5.12-36.693333-15.274667l-321.749333-310.869333c-20.992-20.394667-20.992-52.650667 0-71.338667l320-312.576c20.992-20.352 54.186667-20.352 73.429333 0 20.992 20.394667 20.992 52.693333 0 71.338667l-283.306667 276.906667 283.306667 275.2c20.992 20.352 20.992 52.650667 0 71.338666a47.232 47.232 0 0 1-34.986667 15.274667z'
          p-id='1351'
        ></path>
      </svg>
    );
  }

  /**
   * 右双箭头
   *
   * @return {*}
   * @memberof IBzExpCalendarHeader
   */
  dArrowRight() {
    return (
      <svg
        class='icon'
        viewBox='0 0 1024 1024'
        version='1.1'
        xmlns='http://www.w3.org/2000/svg'
        p-id='796'
        width='16'
        height='16'
      >
        <path
          d='M532.48 896c-13.610667 0-25.472-5.12-35.669333-15.274667-20.394667-20.394667-20.394667-52.693333 0-71.338666l275.2-275.2-275.2-276.906667c-20.394667-20.352-20.394667-52.650667 0-71.338667 20.394667-20.352 52.650667-20.352 71.338666 0l312.576 312.576c20.352 20.394667 20.352 52.650667 0 71.338667l-312.576 310.869333c-8.490667 10.197333-22.101333 15.274667-35.669333 15.274667z'
          p-id='797'
        ></path>
        <path
          d='M221.610667 896c-13.568 0-25.472-5.12-35.669334-15.274667-20.352-20.394667-20.352-52.693333 0-71.338666l275.2-275.2-275.2-276.906667c-20.352-20.352-20.352-52.650667 0-71.338667a49.28 49.28 0 0 1 71.338667 0l312.576 312.576c20.394667 20.394667 20.394667 52.650667 0 71.338667L257.28 880.725333a48.896 48.896 0 0 1-35.669333 15.274667z'
          p-id='798'
        ></path>
      </svg>
    );
  }

  arrowRight() {
    return (
      <svg
        class='icon'
        viewBox='0 0 1024 1024'
        version='1.1'
        xmlns='http://www.w3.org/2000/svg'
        p-id='1609'
        width='16'
        height='16'
      >
        <path
          d='M351.36 896c-14.08 0-26.368-5.12-36.906667-15.274667-21.034667-20.394667-21.034667-52.693333 0-71.338666l284.458667-275.2L314.453333 257.28c-21.034667-20.352-21.034667-52.650667 0-71.338667 21.077333-20.352 54.442667-20.352 73.770667 0l321.28 312.576c21.077333 20.394667 21.077333 52.650667 0 71.338667L388.266667 880.725333a51.370667 51.370667 0 0 1-36.864 15.274667z'
          p-id='1610'
        ></path>
      </svg>
    );
  }
}
